<template>
    <div class="dai">
        <div class="cont">
            <div class="abb">
                <h1>仓库信息</h1>
                <div class="nmb">
                    <div class="nmbs">
                        交易流水表ID:<el-input v-model="filters.id" clearable @change="loadwarehouses"></el-input>
                    </div>
                    <div class="nmbs">
                        交易类型:<el-select v-model="filters.jiaoyilei" clearable @change="loadwarehouses">
                            <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="nmbs">
                        源单据ID:<el-input v-model="filters.yuandanju" clearable @change="loadwarehouses"></el-input>
                        <el-button @click="resfrom">重置</el-button>
                    </div>
                </div>
            </div>
            <div>
                <el-table :data="tabos" border>
                    <el-table-column label="交易流水ID" prop="id"></el-table-column>
                    <el-table-column label="交易类型" prop="jiaoyilei"></el-table-column>
                    <el-table-column label="源单据ID" prop="yuandanju"></el-table-column>
                    <el-table-column label="源单据类型" prop="yuandanlei"></el-table-column>
                    <el-table-column label="仓库ID" prop="cangkuid"></el-table-column>
                    <el-table-column label="物料ID" prop="wulianid"></el-table-column>
                    <el-table-column label="批次号" prop="picihao"></el-table-column>
                    <el-table-column label="交易数量" prop="jiaoyishu"></el-table-column>
                    <el-table-column label="交易时间" prop="jiaoyitime"></el-table-column>
                    <el-table-column label="操作员ID" prop="yuangongid"></el-table-column>
                    <el-table-column label="备注" prop="zhumin"></el-table-column>
                </el-table>
            </div>
        </div>
    </div>

    <el-dialog v-model="insertVisible">
        <router-view @closeDialog="closeDialog">
        </router-view>
    </el-dialog>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import request from '@/api/request';
import { useRouter } from "vue-router";
import { ElMessage } from 'element-plus';

const insertVisible = ref(false)

const router = useRouter();

const filters = ref({ id: '', jiaoyilei: '', yuandanju: '' });

const warehoseList = ref([]);
const types = ref([
    { value: "PO_IN", label: "PO_IN" },
    { value: "MO_OUT", label: "MO_OUT" },
    { value: "MO_IN", label: "MO_IN" },
    { value: "SO_OUT", label: "SO_OUT" }
]);
const loadwarehouses = () => {
    request({
        method: "get",
        url: "inventory_sss/trees"
    }).then(res => {
        console.log(res.data);
        if (res.data) {
            warehoseList.value = res.data.data.map(item => ({
                id: item.transactionId,
                jiaoyilei: item.transactionType,
                yuandanju: item.sourceDocId,
                yuandanlei: item.sourceDocType,
                cangkuid: item.warehouseId,
                wulianid: item.materialId,
                picihao: item.batchNo,
                jiaoyishu: item.quantity,
                jiaoyitime: new Date(item.transactionTime).toLocaleDateString(),
                transactionTime: item.transactionTime,
                yuangongid: item.operatorId,
                zhumin: item.remarks
            }));
        } else {
            console.error("查询失败:", res.message);
            ElMessage.error("查询失败:", +res.message)
        }
    }).catch(err => {
        console.error("请求异常:", err);
        ElMessage.error("加载失败:", err.message)
    });
};
onMounted(loadwarehouses);
const tabos = computed(() => {
    // 先过滤
    const filtered = warehoseList.value.filter(item => {
        const matchId = filters.value.id ? item.id.includes(filters.value.id) : true;
        const matchjiaoyilei = filters.value.jiaoyilei ? item.jiaoyilei === filters.value.jiaoyilei : true;
        const yuandanju = filters.value.yuandanju ? item.yuandanju.includes(filters.value.yuandanju) : true;
        return matchId && matchjiaoyilei && yuandanju;
    });
    
    // 再按交易时间降序排序（最新的在前）
    return filtered.sort((a, b) => {
        return b.transactionTime - a.transactionTime;
    });
});

const resfrom = () => {
    filters.value = { id: "", jiaoyilei: "", yuandanju: "" }
    loadwarehouses();
};

let closeDialog = () => {
    insertVisible.value = false
    loadwarehouses();
    router.push('/stock/inbound');
}
</script>

<style scoped>
.nmb {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 20px;
    padding: 10px 0;
}

.nmbs {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 280px;
    gap: 10px
}

.nmb span {
    width: 100px;
    text-align: right;
}

.filter-input {
    flex: 1;
    min-width: 180px;
}


.reset-btn {
    margin-left: 10px;
    white-space: nowrap;
}

.a {
    margin-bottom: 20px;
}
</style>
